<template>
  <div class="result-info">
    <div class="content-box">
      <div class="content-left">
        <div class="left-title">区域名称</div>
        <div class="left-box">
          <div
            :class="['box-item', state.currentArea == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secList"
          >
            <el-tooltip :content="item.zName" placement="top" :disabled="item.zName.length < 5">
              <span @click="handleClickArea(item, index)">{{ item.zName }}</span>
            </el-tooltip>
            <span>
              <!-- <el-icon @click="handleEditConifg">
                    <EditPen />
              </el-icon>-->
            </span>
          </div>
          <!-- <div class="box-btn" @click="handleChangeArea()">区域调整</div> -->
        </div>
      </div>
      <div class="content-left">
        <div class="left-title">控制断面名称</div>
        <div class="left-box">
          <el-collapse v-model="state.collapseActive" accordion @change="handleSwitchCollapse">
            <el-collapse-item name="1">
              <template #title>
                <span class="mg10">水库/闸/坝</span>
              </template>
              <div class="tabs-list">
                <div
                  :class="['list-item', state.current === index ? 'active' : '']"
                  v-for="(item, index) in state.secArr.filter(
                    (v) => v.sttp == 'RR' || v.sttp == 'DD' || v.sttp == 'DM'
                  )"
                  :key="index"
                  @click="handleClickSec(item, index)"
                >
                  <el-tooltip
                    :content="item.blknm"
                    placement="top"
                    :disabled="item.blknm.length < 6"
                  >
                    <span>{{ item.blknm }}</span>
                  </el-tooltip>
                  <span>
                    <el-icon @click.stop="handlePositionSec(item)">
                      <Position />
                    </el-icon>
                  </span>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <span class="mg10">水文/水位</span>
              </template>
              <div class="tabs-list">
                <div
                  :class="['list-item', state.current === index ? 'active' : '']"
                  v-for="(item, index) in state.secArr.filter(
                    (v) => v.sttp == 'ZQ' || v.sttp == 'ZZ'
                  )"
                  :key="index"
                  @click="handleClickSec(item, index)"
                >
                  <el-tooltip
                    :content="item.blknm"
                    placement="top"
                    :disabled="item.blknm.length < 6"
                  >
                    <span>{{ item.blknm }}</span>
                  </el-tooltip>
                  <span>
                    <el-icon @click.stop="handlePositionSec(item)">
                      <Position />
                    </el-icon>
                  </span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">
          区域计算方案设置区-
          <span>{{ state.secName }}</span>
        </div>
        <div class="right-box">
          <div class="box-right">
            <div class="comput-times">
              <div class="times-title">
                <span>模型精度评定</span>
              </div>
            </div>
            <div class="table-box">
              <el-table
                border
                :data="state.tableData"
                height="100%"
                :span-method="objectSpanMethod"
              >
                <el-table-column
                  prop="blknm"
                  label="预报断面"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="fcProj"
                  label="预报项目"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="预报方案精度" align="center">
                  <el-table-column prop="ccNum" label="总场次" align="center"></el-table-column>
                  <el-table-column prop="qualNum" label="合格场次" align="center"></el-table-column>
                  <el-table-column prop="rate" label="合格率(%)" align="center"></el-table-column>
                  <el-table-column prop="grade" label="等级" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <!-- <div class="comput-times">
              <div class="times-title">
                <span>模型时效评定</span>
              </div>
            </div>
            <div class="table-time">
              <el-table border :data="timeTableData" style="width: 100%">
                <el-table-column label="预报断面" prop="blknm" align="center" />
                <el-table-column label="总场次" prop="ccTotal" align="center" />
                <el-table-column label="成功场次" prop="ccPass" align="center" />
                <el-table-column label="最大耗时" prop="maxTake" align="center" />
                <el-table-column label="最小耗时" prop="minTake" align="center" />
                <el-table-column label="平均耗时" prop="avgTake" align="center" />
                <el-table-column label="评定等级" prop="level" align="center" />
              </el-table>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import emitter from '@/utils/bus'
import {
  getAreaSecList,
  getZoneList,
  getRiverDurResult,
  getRiverEvaResult
} from '@/services/modules/compute-methods'
const state = reactive({
  tableData: [],
  secList: [],
  secName: '',
  secArr: [],
  currentArea: 0,
  current: 0,
  collapseActive: '1'
})

const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  }
})

watch(
  () => props.zId,
  async () => {
    await getSecList(props.zId)
    // 默认选中第一个区域
    handleClickArea(state.secList[0], 0)
  },
  { immediate: true, deep: true }
)
function handleSwitchCollapse(val) {
  state.current = 0
  if (val == 1) {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickSec(state.secArr.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
//获取河系区域
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getZoneList({ rsid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
//获取断面列表
function handleClickArea(item) {
  getAreaSecList({ zid: item.zid }).then((res) => {
    if (res.code === 200) {
      state.secArr = res.data
      handleClickSec(state.secArr.filter((v) => v.sttp == 'RR')[0], 0)
    }
  })
}
function handlePositionSec(item) {
  emitter.emit('fixedPosition', item)
}
//点击预报断面
function handleClickSec(item, index) {
  state.current = index
  state.secName = item.blknm
  // emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
  console.log('123', props.schemeId)
  getRiverDurResult({ scid: props.schemeId, blkcd: item.blkcd }).then((res) => {
    if (res.code === 200) {
      console.log(res)
    }
  })
  getRiverEvaResult({ scid: props.schemeId, blkcd: item.blkcd }).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data
    }
  })
}
onMounted(() => {})
const timeTableData = reactive([])
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.times-title {
  color: #409eff;
  margin-top: 10px;
  margin-bottom: 10px;
}
.result-info {
  width: 100%;
  height: 100%;
  .content-box {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .content-left {
      width: 150px;
      // height: 100%;
      height: calc(100% - 2px);
      margin: 0 5px;

      border: 1px solid #c8c2c29d;
      .left-title {
        font-size: 14px;
        height: 40px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
      .left-box {
        height: calc(100% - 40px);
        overflow-y: auto;
        .mg10 {
          width: 100%;
          text-align: center;
          margin-left: 10px;
        }
        :deep(.el-collapse-item__wrap) {
          border: none;
        }
        :deep(.el-collapse-item__header) {
          padding-left: 10px;
        }
        .list-item,
        .box-item {
          text-align: center;
          font-size: 14px;
          height: 30px;
          color: gray;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 5px;
          span:nth-of-type(1) {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &.active {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          &:hover {
            span:nth-of-type(1) {
              cursor: pointer;

              color: #409eff;
            }
          }
          span:nth-of-type(2) {
            color: #409eff;
            margin-right: 10px;
          }
        }
      }
    }
    .content-right {
      font-size: 14px;
      width: calc(100% - 320px);
      height: 100%;
      padding-left: 10px;
      .right-title {
        margin-bottom: 10px;
      }
      .right-box {
        width: 100%;
        height: calc(100% - 40px);
        :deep(.el-tabs--border-card) {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 60px);
            .el-tab-pane {
              height: 100%;
              .flood-form {
                padding: 15px;
                .form-item {
                  height: 30px;
                  .btn-color {
                    color: #409eff;
                    margin-left: 50px;
                  }
                  .name {
                    color: grey;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
        .box-right {
          height: 100%;
          .table-box {
            height: 200px;
          }
          .table-time {
            height: calc(100% - 248px);
            .el-table {
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
